<template>
	<view class="container">
		<view class="header" :style="headerStyle">
			<view class="con">
				<view class="btn_search" @click="onSearchClick()">
					<image src="/static/fanli/319.png" class="icon" mode=""></image>
					<text>搜索商品标题，领优惠券</text>
				</view>
				
				<view class="btn_scan" @click="onScanClick">
					<image src="/static/images/icon_link.png" class="icon" mode=""></image>
				</view>
			</view>
			
		</view>
		
		<view class="main">
			<view class="banner">
				<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" indicator-active-color="#FF2D5E">
					<swiper-item v-for="(item, index) in advs" :key="index">
						<view class="swiper-item" @click="onAdClick(item, index)"><image class="img" :src="item.pic" mode="widthFix"></image></view>
					</swiper-item>
				</swiper>
			</view>
			
			<view class="quick">
				<view class="li" v-for="(item, index) in quick" :key="index" @click="onAdClick(item, index)">
					<image :src="item.pic" mode="" class="icon"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
			
			<view class="hot-area">
				<view class="con">
					<view class="li" v-for="(item, index) in hotArea" :key="index" @click="onAdClick(item, index)">
						<image :src="item.pic" mode="" class="icon"></image>
					</view>
				</view>
			</view>
			
			<view class="hot-goods">
				<view class="title">
					爆品推荐
				</view>
				<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="6000" indicator-active-color="#FF2D5E">
					<swiper-item v-for="(good, key) in hotGood" :key="key">
						<view class="swiper-item hot-good-list">
							<view class="item" v-for="(item, index) in good" :key="index" @click="onGoodClick(item, index)">
								<image :src="item.main_pic || item.goods_thumb" mode="" class="pic"></image>
								
								<view class="cite">
									<text class="name">{{item.goods_name || item.title}}</text>
									<view class="row">
										<view class="quan" v-if="item.itemfee_coupon>0">
											<text>券{{item.itemfee_coupon}}</text>
										</view>
										
										<view class="fan">
											<text>返{{item.buy_commission}}</text>
										</view>
									</view>
									<view class="price">
										<text class="i">￥</text>
										<text class="b">{{item.shop_price || item.itemfee_final}}</text>
										<text class="u" v-if="item.itemfee_coupon>0">￥{{item.itemfee}}</text>
										<text class="u" v-if="item.market_price">￥{{item.market_price}}</text>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		
		<view class="list_tabs">
			<scroll-view scroll-x class="scrollview">
				<template v-for="(item, index) in platformList[currentPlatform].tabs" >
					<view class="item" :class="currentTab == index ? 'current' : ''" :key="index" @click="onTabClick(index)">
						<text>{{item.name}}</text>
						<view class="line" v-if="currentTab == index" />
					</view>
				</template>
			</scroll-view>
		</view>
		
		<view
			v-for="(platform, pindex) in platformList" 
			:key="pindex"
			v-show="currentPlatform == pindex"
		>
			<view 
				v-for="(tab, tindex) in platform.tabs" 
				:key="tindex"
				v-show="currentTab == tindex"
			>
				<view class="good-list">
					<goods-list-item
						v-for="(item, index) in tab.list"
						:item="item"
						:key="index"
						:index="index"
						@on-item-click="onGoodClick"
						@on-share-click="onShareClick"

					/>
				</view>
			</view>
		</view>
		
		<uni-load-more :status="platformList[currentPlatform].tabs[currentTab].loadingMore ? 'loading' : ''"></uni-load-more>
		
		<!-- popup -->
		<view class="popup_add_tips" :style="popupAddTipsStyle" v-if="showAddTips" @click="onAddTipsClick">
			<text class="p">添加到我的小程序，随时领券</text>
			<image src="../../../static/fanli/318.png" mode="" class="icon"></image>
		</view>
		
		<view class="popup_new_member_full" v-if="showNewMemberFull">
			<image src="../../../static/fanli/324.png" mode="widthFix" class="pic" @click="onNewMemberClick"></image>
			<image src="../../../static/fanli/313.png" mode="" class="close" @click="onCloseNewMemberClick"></image>
		</view>

		<good-share  ref="goodShare" />

	</view>
</template>

<script>
	import { JSMRequest } from '@/module/api'
	import { avatarUrl, getRandMobile, urlParams, getPreference, savePreference, encodeGoodId } from '@/common/util'
    import WxNotificationCenter from '@/libs/WxNotificationCenter/wxnotificationcenter'
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import goodsListItem from '@/components/goods-list-item/goods-list-item'
	import GoodShare from '@/components/good-share/good-share'

	const _ = require("@/libs/underscore/underscore-min.js")._
	
	export default {
		components: {
			uniLoadMore,
			goodsListItem,
			GoodShare

		},
		data() {
			return {
				loaded: false,
				statusBarHeight: 0,
				headerHeight: 0,
				tabs: [],
				currentTab: 0,
				advs: [],
				quick: [],
				seckill: [],
				hotAreaBanner: null,
				hotArea: [],
				hotGood: [],
				platformList: [
					{ 
						name: '京东', 
						sub_name: '',
						value: 'jd',
						tabs: []
					}
				],
				currentPlatform: 0,
				// 1：综合  2：销量降序 3：销量升序  4：价格升序  5：价格降序 6：佣金比例降序 7：佣金比例升序
				orderByList: [
					{
						name: '综合',
						child: [
							{
								name: '综合',
								value: 1
							},
							{
								name: '佣金比例降序',
								value: 6
							},
							{
								name: '佣金比例升序',
								value: 7
							}
						],
						type: 'select',
						status: false
					},
					{
						name: '销量',
						child: [
							{
								name: '销量降序',
								value: 2
							},
							{
								name: '销量升序',
								value: 3
							}
						],
						type: 'click'
					},
					{
						name: '价格',
						child: [
							{
								name: '价格降序',
								value: 5
							},
							{
								name: '价格升序',
								value: 4
							}
						],
						type: 'click'
					}
				],
				showOrderByListSelect: false,
				showAddTips: false,
				showNewMember: false,
				showNewMemberFull: false,
				hasInvite: 0,
				buyList: []
			};
		},
		
		computed: {
			shareAppMessage () {
				let invite = this.userInfo.code || ""
				let scene = encodeURIComponent(`iv=${invite}`)
				return Object.assign(this.$store.state.shareAppMessage, {
					path: `/pages/index/index?scene=${scene}`,
				})
			},
			
			userInfo () {
				return this.$store.state.userInfo
			},
			
			headerStyle () {
				return "padding-top: " + this.statusBarHeight + "px;"
			},
			
			popupAddTipsStyle () {
				let top = parseInt(this.statusBarHeight) + 50
				return "top: " + top + "px;"
			},
			
			platformTabsStyle () {
				let top = this.headerHeight + parseInt(this.statusBarHeight)
				return "top:"+top+"px;"
			},
		},
		
		onShareAppMessage (e) {
			return this.shareAppMessage
		},
		
		onReady () {
			let _t = this
			uni.getSystemInfo({
				success: res => {
					let radio = 750 / res.windowWidth
					_t.statusBarHeight = res.statusBarHeight
					_t.headerHeight = 92 / radio
				}
			})
		},
		
		onReachBottom() {
			let _t = this
			let currentPlatform = this.currentPlatform
			let currentTab = this.currentTab
			let platform = this.platformList[currentPlatform]
			let tab = platform.tabs[currentTab]
			
			if(!tab.loaded) return false
			if(tab.isEmpty) return false
			if(tab.loadingMore) return false
			
			tab.page ++
			tab.loadingMore = true
			
			this.getPageData()
		},
		
		onLoad() {
			let _t = this
			let loaded = 0
			let preference = getPreference()
			
			if(!(preference && preference.addTipsClick)) this.showAddTips = true
			
			// 获取分类
			_.each(this.platformList, (platform, index) => {
				
				JSMRequest({
					tag: "jsm-index"
				}).then(( { data } ) => {
					let tabs = []
					_.each(data, (v, k) => {
						switch (k) {
							case "1" : 
								_t.advs = v
								break;
							case "2" :
								_t.quick = v
								break;
							case "3" :
								_t.hotArea = v
								break;
							case "4" :
								let hot = []
								let num = 3
								let list = v.self
								list = list.concat(v.jd)
								list.forEach((item, index) => {
								    let page = Math.floor(index / num); // 计算该元素为第几个素组内
								    if (!hot[page]) { // 判断是否存在
								      hot[page] = [];
								    }
								    hot[page].push(item);
								})
								_t.hotGood = hot
								break;
							case "5" :
								tabs = v.map((v, k) => {
									return {
										value: v.key,
										name: v.name,
										type: v.type,
										list: [],
										page: 1,
										sortBy: 1,
										loaded: false,
										isEmpty: false,
										loadingMore: true,
										currentOrderBy: 0,
										currentOrderByChild: [0, 0, 0],
										currentOrderBySelect: null
									}
								})
								break;
						}
					})
					platform.tabs = tabs
					_t.getPageData(index)
					loaded ++
					if(loaded == _t.platformList.length) _t.loaded = true
				}).catch(e => {
					console.log(e)
				})
			})
			
			this.checkClipboardData()
		},
		
		methods:{
			onScanClick () {
				
				if(this.userInfo == null){
					return uni.navigateTo({
						url: "/Pages/index/index"
					})
				}

				// 绑定邀请码
				if(!this.userInfo.parent){
					return uni.navigateTo({
						url: "/pageMe/me/bind-invite/bind-invite"
					})
				}
				
				uni.navigateTo({
					url: "/pages/home/good-detial-link/good-detial-link"
				})
			},
			
			checkClipboardData () {
				let _t = this
				uni.getClipboardData({
					success: ({data}) => {
						if(data){
							uni.showModal({
								title: "是否搜索以下商品",
								content: data,
								confirmText: "搜索",
								confirmColor: "#FF264C",
								success: ({confirm}) => {
									confirm && _t.onSearchClick(data)
								}
							})
						}
					}
				})
			},
			
			onAdClick (item, index) {
				if(!_.isEmpty(item.url)){
				    if(item.url.indexOf("http")>-1){
						uni.navigateTo({
							url: "/pages/common/webview/webview?uri=" + item.url + "&title="+ item.name
						})
				    }else{
				        try {
							let url = JSON.parse(item.url)
							// url = {
							//  mpweixin: {
							//   path: "/pages/home/good-list/good-list",
							//   params: {
							// 	  name: "京东",
							// 	  platform: "jd"
							//   }
							//  }
							// }
							if(url.mpweixin){
								let mpweixin = url.mpweixin
								console.log(mpweixin)
								let path = mpweixin.path
								if(mpweixin.params){
									path += path.indexOf("?") > -1 ? "&params=" : "?params="
									path += encodeURIComponent(JSON.stringify(mpweixin.params))
								}

								uni.navigateTo({
									url: path
								})
							}
				        } catch (e) {
				         
				        }
				    }
				}else{
					let path = ""
					switch (item.type) {
						case "1" :
							path = "/pages/new/school-detail/school-detail?key="+item.key+"&title="+item.name
							break;
						case "2" :
							path = "/pages/home/good-list/good-list?params=" + JSON.stringify({
								name: item.name,
								type: item.type,
								exParams: {
									key: item.key
								}
							});
							break;
						case "3" :
							path = "/pages/home/good-detail/good-detail?key=" + item.key
							break;
						case "4" :
							path = "/pages/home/good-list/good-list?params=" + JSON.stringify({
								name: item.name,
								type: item.type,
								exParams: {
									key: item.key
								}
							});
							break;
						case "5" :
							path = "/pageSupplier/supplier/good-detail/good-detail?isSupplierGood=0&key=" + item.key
							break;
					}
					
					uni.navigateTo({
						url: path
					})
				}
			},
			
			onAddTipsClick () {
				this.showAddTips = false
				savePreference({
					data: {
						addTipsClick: 1
					}
				})
			},
			
			// 排序
			onSortByClick (item, index) {
				let _t = this
				let currentPlatform = this.currentPlatform
				let currentTab = this.currentTab
				let platform = this.platformList[currentPlatform]
				let tab = platform.tabs[currentTab]
				
				if(item.type == 'click'){
					if(tab.currentOrderBy == index){
						tab.currentOrderByChild[index] = tab.currentOrderByChild[index] == 0 ? 1 : 0
						tab.sortBy = this.orderByList[index].child[tab.currentOrderByChild[index]].value
					}else{
						tab.currentOrderBy = index
						tab.currentOrderByChild[index] = 0
						tab.sortBy = this.orderByList[index].child[0].value
					}
					
					tab.page = 1
					tab.list = []
					tab.loadingMore = true
					tab.isEmpty = false
					
					this.onCloseSelectSortByClick()
					this.getPageData()
				}else{
					this.showOrderByListSelect = true
				}
			},
			
			// 排序下拉
			onSelectSortByClick (item, index, pindex){
				let _t = this
				let currentPlatform = this.currentPlatform
				let currentTab = this.currentTab
				let platform = this.platformList[currentPlatform]
				let tab = platform.tabs[currentTab]
				
				if(tab.currentOrderByChild[pindex] == index && tab.currentOrderBy == pindex){
					this.onCloseSelectSortByClick()
				}else{
					tab.currentOrderBy = pindex
					tab.currentOrderByChild[pindex] = index
					tab.sortBy = this.orderByList[pindex].child[index].value
					
					tab.page = 1
					tab.list = []
					tab.loadingMore = true
					tab.isEmpty = false
					
					this.onCloseSelectSortByClick()
					this.getPageData()
				}
			},
			
			onCloseSelectSortByClick () {
				this.showOrderByListSelect = false
			},
			
			onGoodClick (item, index){
				// console.log(item)
				if(item.item_id){
					uni.navigateTo({
						url: "/pages/home/good-detail/good-detail?id=" + item.item_id
					})
				}else{
					uni.navigateTo({
						url: "/pageSupplier/supplier/good-detail/good-detail?isSupplierGood=0&id=" + item.id
					})
				}
			},

			onShareClick (item, index) {
				if(this.userInfo == null){
					return uni.navigateTo({
						url: "/pages/index/index"
					})
				}
				
				// 绑定邀请码
				if(!this.userInfo.parent){
					return uni.navigateTo({
						url: "/pageMe/me/bind-invite/bind-invite"
					})
				}
				
				let type = item.item_id ? 1 : 2
				let id = item.item_id || item.id
				let codeStr = '- - -$￥' + encodeGoodId(id.toString()) + '1￥$- - -';
				let copyText = item.title || item.goods_name
				
				this.$refs.goodShare.show({
					id,
					type,
					text: copyText
				})
			},
			
			onNewMemberClick () {
				uni.navigateTo({
					url: "/pages/home/new-member/new-member"
				})
			},
			
			onCloseNewMemberClick () {
				this.showNewMemberFull = false
			},
			
			getPageData (index) {
				let _t = this
				let currentPlatform = index || this.currentPlatform
				let currentTab = this.currentTab
				let platform = this.platformList[currentPlatform]
				let tab = platform.tabs[currentTab]

				JSMRequest({
					tag: "jsm-good-list",
					params: {
						page: tab.page,
						key: tab.value
					}
				}).then(({ data }) => {
					let list = tab.page == 1 ? [] : tab.list
					list = list.concat(data.self)
					list = list.concat(data.jd)
					
					tab.list = list
					// tab.isEmpty = data.length < 10
					tab.loadingMore = false
					tab.loaded = true
				}).catch(e => {
					tab.isEmpty = true
					tab.loadingMore = false
					tab.loaded = true
				})
			},
			
			onPlatformClick (index) {
				this.currentPlatform = index
				
				let currentPlatform = index
				let currentTab = this.currentTab
				let platform = this.platformList[currentPlatform]
				let tab = platform.tabs[currentTab]
				
				if(!tab.loaded) this.getPageData()
			},
			
			onTabClick (index) {
				this.currentTab = index
				
				let currentPlatform = this.currentPlatform
				let currentTab = index
				let platform = this.platformList[currentPlatform]
				let tab = platform.tabs[currentTab]
				
				if(!tab.loaded) this.getPageData()
			},
			
			// 搜索
			onSearchClick () {
				uni.navigateTo({
					url: "/pages/home/search/search?keyword="
				})
			}
		}
	}
</script>

<style>
	page{
		background: #FFFFFF;
	}
</style>

<style lang="less" scoped>
	.scrollview{
		white-space: nowrap;
	}
	
	.container{
		padding-bottom: 120px;
	}
	
	.header{
		position: sticky;
		width: 100%;
		height: 92px;
		top: 0;
		left: 0;
		z-index: 10;
		background:linear-gradient(180deg,rgba(255,87,87,1) 0%,rgba(255,40,61,1) 100%);
		
		.con{
			width: 100%;
			height: 92px;
			display: flex;
			flex-direction: row;
			align-items: center;
			box-sizing: border-box;
			padding: 0 30px;
			padding-right: 210px;
			padding-left: 90px;
			position: relative;
			
			.btn_scan{
				position: absolute;
				left: 30px;
				bottom: 0;
				height: 92px;
				display: flex;
				align-items: center;
				
				.icon{
					width: 36px;
					height: 36px;
				}
			}
			
			.btn_search{
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 72px;
				background: rgba(255,255,255,.2);
				border-radius: 36px;
				padding: 0 30px;
				box-sizing: border-box;
				width: 100%;
				
				.icon{
					width: 28px;
					height: 28px;
					margin-right: 20px;
				}
				
				text{
					font-size: 24px;
					color: #fff;
				}
			}
		}
	}
	
	.list_tabs{
		height: 96px;
		border-bottom: 1px solid #ddd;
		border-top: 30px solid #F2F2F2;
		
		.item{
			display: inline-block;
			height: 96px;
			padding: 0 20px;
			text-align: center;
			position: relative;
				
			&:first-child{
				margin-left: 10px;
			}
			
			&:last-child{
				margin-right: 10px;
			}
			
			text{
				color: #666;
				font-size: 28px;
				line-height: 96px;
			}
			
			.line{
				position: absolute;
				bottom: 20px;
				left: 50%;
				margin-left: -12px;
				height: 4px;
				width: 24px;
				background-color: rgba(255,40,61,1);
			}
			
			&.current{
				
				text{
					color: rgba(255,40,61,1);
				}
			}
		}
	}
	
	.banner{
		position: relative;
		padding-top: 20px;
		background: #FFFFFF;
		width: 100%;
		overflow-x: hidden;
		
		&::before {  
			content: '';  
			width: 100%;  
			height: 66px;  
			position: absolute;  
			left: 0; 
			top: 0;  
			background: rgba(255,40,61,1);
		}
		
		&::after {  
			content: '';  
			width: 110%;  
			height: 80px;  
			position: absolute;  
			left: -5%; 
			top: 66px; 
			 z-index: 1;
			border-radius: 0 0 50% 50%;  
			background: rgba(255,40,61,1);
		}
		
		.swiper{
			width: 690px;
			height: 276px;
			border-radius: 12px;
			overflow: hidden;
			margin: 0 auto;
			position: relative;
			z-index: 2;
		}
		
		.swiper-item{
			.img{
				width: 100%
			}
		}
	}
	
	.quick{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		background: #FFFFFF;
		padding-top: 1px;
		
		.li{
			width: 20%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 30px;
			
			.icon{
				width: 84px;
				height: 84px;
				margin-bottom: 6px;
			}
			
			text{
				font-size: 24px;
				color: #333333;
			}
		}
	}
	
	.hot-area{
		padding: 30px 30px 0;
		background: #fff;
		
		.con{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			
			.li{
				width: 340px;
				margin-bottom: 10px;
				
				.icon{
					width: 340px;
					height: 180px;
					vertical-align: bottom;
					border-radius: 12px;
				}
			}
		}
	}
	
	.seckill{
		background: #FFFFFF;
		padding: 30px;
		position: relative;
		
		.con{
			background: #FFF0F2;
			border-radius: 12px;
			
			.title{
				height: 76px;
				background: linear-gradient(90deg,rgba(255,57,97,1) 0%,rgba(255,209,56,1) 100%);
				border-radius: 12px 12px 40px 0px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.go{
					width: 128px;
					height: 44px;
					background: #FF3660;
					border-radius: 22px;
					line-height: 44px;
					text-align: center;
					margin-right: 30px;
					font-size: 22px;
					color: #FFFFFF;
				}
				
				.lt{
					display: flex;
					align-items: center;
					margin-left: 30px;
					
					.icon{
						width: 150px;
						height: 44px;
					}
					
					.time{
						display: flex;
						align-items: center;
						padding-left: 12px;
						
						text{
							font-size: 22px;
							color: #FFFFFF;
						}
						
						.sp{
							width: 36px;
							height: 36px;
							background: #FFFFFF;
							border-radius: 8px;
							display: flex;
							align-items: center;
							justify-content: center;
							margin: 0 8px;
						
							text{
								color: #FF3660;
							}
						}
					}
				}
			}
			
			.list{
				height: 332px;
				background: #FFF0F2;
				box-sizing: border-box;
				padding-top: 20px;
				
				.item{
					display: inline-block;
					margin-right: 20px;
					width: 196px;
						
					&:first-child{
						margin-left: 20px;
					}
					
					.pic{
						width: 196px;
						height: 196px;
						border-radius: 8px;
						display: block;
					}
					
					.name{
						margin-top: 16px;
						width: 100%;
						font-size: 26px;
						color: #333;
						display: -webkit-box;
						overflow: hidden;
						white-space: normal;
						text-overflow: ellipsis;
						word-wrap: break-word;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
					
					.price{
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						margin-top: 4px;
						
						.i{
							font-size: 20px;
							color: #FF2D5E;
							padding-top: 4px;
						}
						
						.b{
							font-size: 28px;
							color: #FF2D5E;
						}
						
						.u{
							font-size: 20px;
							color: #999;
							padding-top: 4px;
							text-decoration: line-through;
							padding-left: 4px;
						}
					}
				}
			}
		}
	}
	
	.popup_add_tips{
		position: fixed;
		right: 14px;
		height: 48px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0,0,0,.6);
		border-radius: 12px;
		padding: 0 12px;
		z-index: 20;
		
		.p{
			color: #FFFFFF;
			font-size: 24px;
		}
		
		.icon{
			width: 26px;
			height: 26px;
			margin-left: 10px;
		}
		
		&::before{
			display: block;
			width: 0;
			height: 0;
			border-bottom: 16px solid rgba(0,0,0,.6);
			border-right: 12px solid transparent;
			border-top: 0 dotted;
			border-left: 12px solid transparent;
			content: "";
			position: absolute;
			right: 120px;
			top: -14px;
		}
	}
	
	.popup_new_member{
		position: fixed;
		left: 0;
		bottom: 30px;
		height: 76px;
		width: 698px;
		box-sizing: border-box;
		padding-right: 20px;
		padding-left: 30px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: rgba(0,0,0,.6);
		border-radius: 0px 8px 8px 0px;
		z-index: 20;
		
		.btn{
			width: 144px;
			height: 52px;
			background: #FF3660;
			border-radius: 26px;
			font-size: 26px;
			line-height: 52px;
			color: #FFFFFF;
		}
		
		.p{
			color: #FFFFFF;
			font-size: 26px;
		}
	}
	
	.popup_new_member_full{
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: rgba(0,0,0,.6);
		z-index: 30;
		
		.pic{
			width: 626px;
		}
		
		.close{
			width: 76px;
			height: 76px;
			margin-top: 76px;
		}
	}
	
	.platform_tabs{
		width: 100%;
		display: flex;
		align-items: center;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 10;
		background: #F2F2F2;
		
		
		.item{
			width: 50%;
			height: 128px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			
			.em{
				font-size: 36px;
				color: #333333;
			}
			
			.tag{
				height: 36px;
				border: 1px solid #999;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 12px;
				margin-top: 4px;
				border-radius: 18px;
				
				text{
					font-size: 26px;
					color: #999999;
				}
			}
			
			&.current{
				
				.em{
					color: #FF3660;
				}
				
				.tag{
					background: #FF3660;
					border-color: #FF3660;
					
					text{
						color: #FFFFFF;
					}
				}
			}
		}
	}
	
	.sortby{
		position: sticky;
		top: 92px;
		left: 0;
		z-index: 10;
		background-color: #FFFFFF;
		
		width: 100%;
		height: 92px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		margin-bottom: 20px;
		
		.li{
			width: 250px;
			height: 92px;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			
			.touch{
				width: 180px;
				height: 52px;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				background: #f2f2f2;
				border-radius: 26px;
			}
			
			text{
				font-size: 22px;
				color: #333333;
			}
			
			.icons{
				margin-left: 8px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			
			.icon{
				width: 12px;
				height: 8px;
				margin: 2px 0;
			}
			
			&.current{
				.touch{
					background: #fff;
					box-sizing: border-box;
					border: 1px solid #FC1F42;
				}
				
				
				text{
					color: #FC1F42;
				}
			}
			
			.sub{
				width: 750px;
				height: 1334px;
				position: absolute;
				top: 92px;
				left: 0;
				
				.shadow{
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: rgba(0,0,0,.75);
				}
				
				.con{
					background: #F2F2F2;
					border-radius: 0 0 20px 20px;
					padding-bottom: 20px;
					padding-top: 10px;
					overflow: hidden;
					position: relative;
					
					.cli{
						height: 80px;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						padding: 0 30px;
						
						text{
							font-size: 28px;
							color: #666;
						}
						
						.icon{
							width: 24px;
							height: 16px;
						}
						
						&.current{
							
							text{
								color: #FF3660;
							}
						}
					}
				}
			}
		}
	}
	
	.good-list{
		min-height: 994px;
		padding: 30px 30px 0;
	}
	
	.hot-good-list{
		display: flex;
		justify-content: space-between;
		padding: 20px 30px 30px;
		
		.item{
			width: 220px;
			background: #FFFFFF;
			border-radius: 12px;
			overflow: hidden;
			
			.pic{
				width: 220px;
				height: 220px;
			}
			
			.cite{
				padding: 10px;
				
				.name{
					width: 100%;
					font-size: 28px;
					color: #333;
					display: -webkit-box;
					overflow: hidden;
					white-space: normal;
					text-overflow: ellipsis;
					word-wrap: break-word;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
				
				.price{
					margin-top: 20px;
					display: flex;
					
					.i{
						font-size: 24px;
						color: #FF3660;
						padding-top: 8px;
					}
					
					.b{
						font-size: 30px;
						color: #FF3660;
					}
					
					.u{
						font-size: 22px;
						color: #999;
						padding-top: 8px;
						text-decoration: line-through;
					}
				}
				
				.row{
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;
					margin-top: 20px;
					
					.quan{
						background: linear-gradient(to right, #fd4a29 , #ff6f18);;
						padding: 0 10px;
						height: 36px;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						border-radius: 6px;
						
						text{
							font-size: 22px;
							color: #FFFFFF;
						}
					}
					
					.fan{
						background: #333333;
						padding: 0 10px;
						height: 36px;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						margin-left: 10px;
						border-radius: 6px;
						
						text{
							font-size: 22px;
							color: #fee7c7;
						}
					}
				}
			}
			
			
		}
	}
	
	.hot-goods{
		.title{
			padding: 30px 30px 0;
			font-size: 32px;
			color: #333333;
		}
		
		.swiper{
			height: 500px;
		}
	}
</style>
